<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      cursor: url(./images/鼠标.png),pointer !important;
    }
    body{
      background: url(./images/16.jpg) no-repeat;
  background-size: 100%;
    }
    .main{
      display: flex;
      width: 1200px;
      height: 400px;
      margin: 100px auto;
    }
    .box {
      position: relative;
      display: flex;
      width: 290px;
      height: 400px;
     margin-right: 10px;
    }
    .box .pic{
      position: absolute;
      width: 284px;
      height: 394px;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-bottom: 2px solid #bbb;
      border-top: 1px solid #ddd;
      border-radius: 10px;
      overflow: hidden;
      transition: all .3s ease;
      background-image: linear-gradient(pink,rgb(248, 14, 229));
      opacity: 0;
    }
    /* .box .pic:hover{
      transform: rotateY(180deg);
    } */
    .box .pic img{
      display: block;
      width: 284px;
      height: 394px;
      /* transform-style: preserve-3d; */
    }
    .box .a1{
      position: absolute;
      top: 0;
      left: 0;
      width: 290px;
      height: 400px;
      margin-right: 10px;
      background-color: rgb(83, 82, 82);
      border: 1px solid #ccc;
      border-bottom: 2px solid #bbb;
      border-top: 1px solid #ddd;
      border-radius: 10px;
      cursor: pointer;
      overflow: hidden;
      transition: all .3s;
      opacity: 0.5;
    }

    .box .a1:hover {
      transform: translateY(-6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
      animation: move01 2s linear forwards;
      
    }
    @keyframes move01{
      1%{
        opacity: 1;
      }
      25%{
        transform: rotateY(0);
      }
      62%{
        opacity: 1;
      }
      62.5%{
        transform: rotateY(90deg);
        opacity: 0;
      }
      100%{
        opacity: 0;
      }
    }
    .box:hover .pic{
      transform: translateY(-6px);
      box-shadow: 0 26px 40px -24px rgba(0, 36, 100, .5);
      animation: move02 1.5s 0.5s linear forwards;
    }
    @keyframes move02{
      48%{
        opacity: 0;
      }
      49%{
        opacity: 1;
      }
      50%{
        transform: rotateY(90deg);
        
      }
      100%{
        transform: rotateY(18deg);
        opacity: 1;
      }
    }

    .box .light {
      cursor: pointer;
      position: absolute;
      left: -114%;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(255, 255, 255, 0.5), hsla(0, 0%, 100%, 0));
      transform: skewx(-16deg);
     
    }

    .box .a1:hover .light {
      transition: all .5s ease;
      left: 114%
    }
    .box .light01,.light02,.light03,.light04 {
      cursor: pointer;
      position: absolute;
      left: -114%;
      top: 0;
      width: 100%;
      height: 100%;
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(247, 6, 118, 0.603), hsla(0, 0%, 100%, 0));
      transform: skewx(-16deg);
  
    }
    .box:hover .light01{
      animation: light01 .5s 2s linear forwards;
    }
    .box:hover .light02{
      animation: light01 .5s 2s linear forwards;
    }
    .box:hover .light03{
      animation: light01 .5s 2s linear forwards;
    }
    .box:hover .light04{
      animation: light01 .5s 2s linear forwards;
    }
    @keyframes light01{
      to{
        transition: all .5s ease;
        left: 114%;
      }
    }
    .box .light02{
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(247, 6, 6, 0.616), hsla(0, 0%, 100%, 0));
    }
    .box .light03{
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(6, 22, 247, 0.616), hsla(0, 0%, 100%, 0));
    }
    .box .light04{
      background-image: -webkit-linear-gradient(0deg, hsla(0, 92%, 49%, 0), rgba(243, 247, 6, 0.616), hsla(0, 0%, 100%, 0));
    }
   
  </style>
</head>

<body>
  <div class="main">
  <div class="box">
    <div class="pic" style="border: 3px solid rgb(248, 14, 229);">
        <img src="./images/动漫02.png" alt="" >
        <i class="light01"></i>
      </div>
      <div class="a1">
        <i class="light"></i>
      </div>
    
  </div>
  <div class="box">
    <div class="pic" style="border: 3px solid rgb(248, 14, 14);">
        <img src="./images/竖版图01.jpg" alt="">
        <i class="light02"></i>
      </div>
      <div class="a1">
        <i class="light"></i>
      </div>
    
  </div>
  <div class="box">
    <div class="pic" style="border: 3px solid rgb(18, 14, 248);">
        <img src="./images/竖版图02.jpg" alt="">
        <i class="light03"></i>
      </div>
      <div class="a1">
        <i class="light"></i>
      </div>
    
  </div>
  <div class="box">
    <div class="pic" style="border: 3px solid rgb(248, 233, 14);">
        <img src="./images/竖版图03.jpg" alt="">
        <i class="light04"></i>
      </div>
      <div class="a1">
        <i class="light"></i>
      </div>
    
  </div>
</div>
</body>

</html>